<mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate" />

<div class="alert alert-info">
  For details on how to customise any of the templates, please see
  <a
    href="https://github.com/mattlewis92/angular-calendar#how-do-i-use-a-custom-template"
    >this guide</a
  >
</div>

<ng-template #customCellTemplate let-day="day" let-locale="locale">
  <div class="cal-cell-top">
    @if (day.badgeTotal > 0) {
    <span class="cal-day-badge">{{ day.badgeTotal }}</span>
    }
    <span class="cal-day-number"
      >{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span
    >
  </div>
  <small style="margin: 5px"
    >There are {{ day.events.length }} events on this day</small
  >
</ng-template>

<div>
  @switch (view) { @case ('month') {
  <mwl-calendar-month-view
    [viewDate]="viewDate"
    [events]="events"
    [cellTemplate]="customCellTemplate"
  />
  } @case ('week') {
  <mwl-calendar-week-view [viewDate]="viewDate" [events]="events" />
  } @case ('day') {
  <mwl-calendar-day-view [viewDate]="viewDate" [events]="events" />
  } }
</div>
